<template>
  <div class="c_policy_index">
    <!-- banner -->
    <div class="re banner" v-if="bannerSwiperData.show && banner.length>0">
      <swiper :options="bannerSwiperConfig">
        <swiper-slide class="swiper-slide" v-for="(item,index) in banner" :key="index">
          <div
            class="link cur"
            @click="indexLink(item)"
            :style="{backgroundImage:'url('+imgUrl+item.attachment.path+')'}"
          ></div>
        </swiper-slide>
      </swiper>
      <swiperBtn :swiperData="bannerSwiperData" />
    </div>
    <!-- 创新政策 & 政策合作 -->
    <div class="sectiona">
      <div class="left">
        <h2 class="policy-h2">
          <!-- 企业合作 -->
          {{$t('common.policy.qyHz')}}
          <a href="javascript:void(0)" @click="navTo('/c_policy_list?type=policyDecode')" v-if="tabStatus==1">{{$t('common.personService.seemore')}}<span><i></i></span></a>
          <a href="javascript:void(0)" @click="navTo('/c_policy_list?type=policySending')" v-if="tabStatus==2">{{$t('common.personService.seemore')}}<span><i></i></span></a>
        </h2>
        <ul class="btn">
          <li :class="{'active':tabStatus==1}" @click="changeTab(1)" class="cur">
            <a href="javascript:void(0)">{{$t('common.policy.analyzing')}}</a>
          </li>
          <li :class="{'active':tabStatus==2}" @click="changeTab(2)" class="cur">
            <!-- 政策发文 -->
            <a href="javascript:void(0)">{{$t('common.policy.publication')}}</a>
          </li>
        </ul>
        <ul class="list-box" v-if="tabStatus==1">
          <template v-for="(item, index) in policy_index.policy_decode">
            <li v-if="index < 3">
              <p>
                <i></i>
                <router-link target="_blank" :to="'/c_policy_detail?type=policyDecode&id='+item.id">{{item.title}}</router-link>
                <span class="newTag rd15" v-if="item.recommendedTagTxt && item.recommendedTag !=0">{{item.recommendedTagTxt}}</span>
              </p>
              <span class="date">{{item.releaseTime}}</span>
            </li>
          </template>
        </ul>
        <ul class="list-box" v-if="tabStatus==2">
          <template v-for="(item, index) in policy_index.policy_sending">
            <li v-if="index < 3">
              <p>
                <i></i>
                <router-link target="_blank" :to="'/c_policy_detail?type=policySending&id='+item.id">{{item.title}}</router-link>
                <span class="newTag rd15" v-if="item.tagTxt && item.tag !=0">{{item.tagTxt}}</span>
              </p>
              <span class="date">{{item.createTime}}</span>
            </li>
          </template>
        </ul>
      </div>
      <div class="right">
        <h2 class="policy-h2">
          <!-- 政策申报 -->
          {{$t('common.leftNav.policy')}}
          <a href="javascript:void(0)" @click="navTo('/c_policy_list?type=policyDeclare')">
            {{$t('common.personService.seemore')}}
            <span>
              <i></i>
            </span>
          </a>
        </h2>
        <ul class="btn">
        </ul>
        <ul class="list-box">
          <template v-for="(item, index) in policy_index.policy_declare">
            <li v-if="index < 4">
              <p style="width: calc(100% - 340px);">
                <i></i>
                <a href="javascript:void(0)" @click="navToIsLogin({data:item,type:0})">{{item.title}}</a>
                <span class="newTag rd15" v-if="item.recommendedTagTxt && item.recommendedTag !=0">{{item.recommendedTagTxt}}</span>
              </p>
              <!-- applyStatus 0-待申报，1-申报中，2-已截止 -->
              <span class="status" :class="{'color1':item.applyStatus=='2','red0':item.applyStatus=='1'}">{{item.applyStatusTxt}}</span>
              <span class="date" style="width:210px">{{item.beginTime}}-{{item.endTime}}</span>
            </li>
          </template>
        </ul>
      </div>
    </div>
    <!-- 政策兑现 -->
    <div class="sectionb">
      <div class="sectionb_container">
        <h2 class="policy-h2">{{$t('common.policy.fulfillment')}}</h2>
        <!-- 快捷服务 -->
        <div class="serve-main clearfix padd" v-if="policy_index.policy_cash.length>0">
          <div class="box clearfix">
            <div class="re serve-banner">
              <swiper :options="serveSwiperConfig">
                <swiper-slide class="swiper-slide" v-for="(item,index) in policy_index.policy_cash" :key="index">
                  <div class="imga">
                    <h3>{{item.title}}</h3>
                    <span>——</span>
                    <p class="des np" v-html="item.briefContent"></p>
                    <a href="javascript:void(0)" @click="navTo('/c_policy_exchange?id='+item.id)">{{$t('common.personService.learnMore')}}></a>
                  </div>
                </swiper-slide>
              </swiper>
              <swiperBtn :swiperData="serveSwiperData" />
            </div>
          </div>
        </div>
        <router-link to="/c_policy_list?type=policyCash" class="news-more cur">
          {{$t('common.personService.seemore')}}
          <img src="../../assets/images/ico-ri.png" class="inbk ease" alt />
        </router-link>
      </div>
    </div>
    <div class="sectionc">
      <div class="seactionc_box">
        <h2 class="policy-h2">
          <!-- 政策推荐 -->
          {{$t('common.policy.recommendation')}}
          <span>{{$t('common.policy.Tips')}}</span>
        </h2>
        <div class="sectionc_box">
          <div class="left">
            <el-form :label-position="labelPosition" label-width="90px" :model="policyMatch">
              <el-form-item label="您的学历">
                <el-select v-model="policyMatch.education" placeholder="请选择">
                  <el-option 
                  :key="index"
                  v-for="(tag,index) in educationList"
                  :label="tag.text"
                  :value="tag.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="海南是否有住房">
                <el-select v-model="policyMatch.house" placeholder="请选择">
                  <el-option label="有" value="1"></el-option>
                  <el-option label="没有" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否参与国家科研课题">
                <el-select v-model="policyMatch.subject" placeholder="请选择">
                  <el-option label="有" value="1"></el-option>
                  <el-option label="没有" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否已婚">
                <el-select v-model="policyMatch.marri" placeholder="请选择">
                  <el-option label="有" value="1"></el-option>
                  <el-option label="没有" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否高层人才">
                <el-select v-model="policyMatch.hLevelTalents" placeholder="请选择">
                  <el-option label="有" value="1"></el-option>
                  <el-option label="没有" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出生年月">
                <el-date-picker type="date" placeholder="请选择" v-model="policyMatch.birthday"></el-date-picker>
              </el-form-item>
              <el-form-item label="持有证书">
               <el-input v-model="policyMatch.certificate" placeholder="请输入持有证书"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="policyMatchAdd()">匹配政策</el-button>
                <!-- <span class="btn-term">条件收起<span class="span-down">》</span></span> -->
              </el-form-item>
            </el-form>
          </div>
          <div class="right" v-if="isLogin">
            <h2>
              <!-- 根据您的信息为您推荐以下合适的 -->
              {{$t('common.policy.Tip2')}}
              
            </h2>
            <ul class="list-box">
              <li v-for="(item, index) in policy_index.policy_recommend.slice(0,6)" :key="index">
                <p>
                  <i></i>
                  <a href="javascript:void(0)" @click="navToIsLogin({data:item,type:1})">{{item.title}}</a>
                  <span class="newTag rd15" v-if="item.recommendedTagTxt && item.recommendedTag !=0">{{item.recommendedTagTxt}}</span>
                </p>
                <span class="status" :class="{'color1':item.applyStatus=='2','red0':item.applyStatus=='1'}">{{item.applyStatusTxt}}</span>
                <span class="date">{{item.beginTime}} - {{item.endTime}}</span>
              </li>
            </ul>
            <p class="h99 font12 mat10">（温馨提示：更多政策请查看政策申报详情）</p>
          </div>
        </div>
    </div>
    </div>
    <!-- 入驻企业墙 -->
    <div class="sectiond">
       <h2 class="policy-h2">{{$t('common.policy.photoWall')}}</h2>
      <ul class="ul">
        <li v-for="(item, index) in policy_photo" :key="index">
          <img :src="imgUrl+item.attachment.path" v-if="item.attachment && item.attachment.path" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import swiperBtn from "@/components/swiperBtn.vue"; //轮播的翻页 + 左右按钮
import { ajax, showToast, isLoginM,jumpRout,ajaxBackAdd,swiperConfig } from "@/utils/js.js";
import {
  homeBanner,
  policyDecode,
  policySending,
  policyDeclare,
  policyCash,
  getPhoto,
  corporateTypeList,
  policyMatchPost,
} from "@/services/api.js";
const log = console.log;
export default {
  components: {
    swiperBtn,
  },
  data() {
    return {
      labelPosition: "right",
      policyMatch:{
        birthday: "",
        certificate: "",
        education: "0",
        hLevelTalents: "0",
        house: "0",
        marri: "0",
        subject: "0"
      },
      tabStatus: 1,
      educationList:[],
      banner: [],
      bannerSwiperConfig: "", //banner-轮播配置,
      bannerSwiperData: { show: false }, //banner-轮播参数
      serveList: [],
      serveSwiperData: { show: false }, //快捷服务-轮播参数
      serveSwiperConfig: "", //快捷服务-轮播配置,
      imgUrl: this.$store.state.imgUrl,
      policy_index:{
        policy_decode:[],
        policy_sending:[],
        policy_declare:[],
        policy_cash:[],
        policy_recommend:[],
        policy_photo:[],
      },
      policy_photo:[],
      isLogin:false,
      isPerson:true,
    };
  },
  mounted() {
    console.log('Authorization',this.$store.state.Authorization)
     if(this.$store.state.Authorization){
      this.isLogin=true;
      if(this.$store.state.userInfo.type==0){
        this.isPerson=true;
      }else{
        this.isPerson=false;
      }
    }
    console.log("11111", this.$store.state.Authorization);
    let data = {
      view: 3,
      prev: "prev1",
      next: "next1",
      show: true,
    };
    swiperConfig(
      this,
      data,
      "serveSwiperConfig",
      "serveSwiperData",
      (index) => {}
    );
    let bannerData = {
      view: 1,
      show: true,
      autoplayLast: true,
      fy: "bannerdot",
    };
    swiperConfig(
      this,
      bannerData,
      "bannerSwiperConfig",
      "bannerSwiperData",
      (index) => {}
    );
    let newsData = {
      view: 1,
      show: true,
      autoplayLast: true,
      delay: 5000,
    };
    swiperConfig(
      this,
      newsData,
      "newsSwiperConfig",
      "newsSwiperData",
      (index) => {
        log(index);
        this.newsCurId = this.newsList[index + 1].id;
      }
    );
    this.content();
  },
  computed: {},
  watch: {
    "$i18n.locale"() {
      this.content();
    },
  },
  methods: {
    content() {
       // 学历要求 education
      ajax(
        this,
        corporateTypeList,
        {
          lxjp: "education",
        },
        (res) => {
          this.educationList = res.data;
        },err=>{

      }
      );
      // 主题轮播
      ajax(this, homeBanner, {}, (res) => {
        this.banner = res.data;
      });
      //政策解读
      ajax(this, policyDecode, {}, (res) => {
        this.policy_index.policy_decode = res.data;
      });
      //政策发文
      ajax(this, policySending, {}, (res) => {
        this.policy_index.policy_sending = res.data;
      });
      //政策申报
      ajax(this, policyDeclare, {}, (res) => {
         this.policy_index.policy_declare = res.data;
      });
       //政策兑换
      ajax(this, policyCash , {
        cashIn: "",
        declarationId: "",
        pageNo: 1,
        pageSize: 7,
        title: ""
      }, (res) => {
         this.policy_index.policy_cash = res.data.records;
      },err=>{

      });
      // 政策推荐
      ajax(this, policyMatchPost, {
          "birthday": "",
          "certificate": "",
          "education": "",
          "hLevelTalents": "",
          "house": "",
          "marri": "",
          "subject": ""
      }, (res) => {
        console.log(res);
        if(res.data){
          this.policy_index.policy_recommend=res.data;
        }
      });

      // 照片风采
      ajax(this, getPhoto, {}, (res) => {
        if (res.data.length > 0) {
          this.policy_index.policy_photo = res.data;
          this.policy_photo = res.data;
        }
      });
    },
    policyMatchAdd(){
       isLoginM(this,()=>{
          ajax(this, policyMatchPost, this.policyMatch, (res) => {
            showToast(this,res.msg,1);
           if(res.data){
              this.policy_index.policy_recommend=res.data;
            }else{
              this.policy_index.policy_recommend=[];
            }
          });
       })
    },
    navTo(url){
      let routeUrl = this.$router.resolve({
       		path: url,
      });
      window.open(routeUrl.href, '_blank');
    },
    navToIsLogin(item){
      isLoginM(this,()=>{
        let e = item.data;
        let type = item.type;  // 0-政策申报，1-政策匹配
        var routeUrl,urlType1,urlType2
        if(type == 0){
          urlType1 = 'c_policy_declare_person?type=policyDeclare&id=';
          urlType2 = 'c_policy_declare_detail?type=policyDeclare&id=';
        }else{
          urlType1 = 'c_policy_declare_person?type=match&id=';
          urlType2 = 'c_policy_declare_detail?type=match&id=';
        }
        // subjectType 1-个人,2-企业
        if(e.subjectType == 1 ){
          routeUrl = this.$router.resolve({ path: urlType1 + e.id});
        }else{
          routeUrl = this.$router.resolve({ path: urlType2 + e.id});
        }
        window.open(routeUrl.href, '_blank');
      })
    },
    //首页跳转
    indexLink(data) {
      if (data.outLink && data.outLink == 1) {
        window.open(data.linkUrl, "-blank");
      } else {
        window.location.href = data.linkUrl;
      }
    },
    changeTab(num) {
      this.tabStatus = num;
    },
  },
};
</script>
<style lang="scss">
.policy-h2{
  width: 100%;
  font-size: 20px;
  padding-left: 5px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  border-left: 2px solid #0f54bc;
  margin: 15px 0;
  line-height:20px;
  a{
    span{
      margin-top: 0 !important;
    }
  }
}
ul,
li {
  list-style: none;
}
* {
  margin: 0;
  padding: 0;
}
.c_policy_index {
  ul.list-box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    li {
      p {
        display: flex;
        flex-direction: row;
        // flex-wrap: nowrap;
        justify-content: flex-start;
        
        width: calc(100% - 240px);
      }
      .status {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        opacity: 1;
      }
      .date {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        opacity: 1;
        width: 120px; text-align: right;
      }
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      border-bottom: 1px solid rgba(221, 221, 221, 1);
      padding: 14px 10px 14px 0px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      opacity: 1;
      i {
        margin: 0 5px;
        align-self: center;
        display: block;
        width: 0px;
        height: 0px;
        content: "";
        border-left: 5px solid #0f54bc;
        border-top: 3px solid transparent;
        border-bottom: 3px solid transparent;
      }
      a {
        display: block;
        color: rgba(102, 102, 102, 1);
        text-decoration: none;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      a:hover {
        color: rgba(15, 84, 188, 1);
      }
    }
  }
  .left ul.list-box p {width: calc(100% - 140px);}
  .sectiona {
    width: 1200px;
    margin: 0 auto;
    padding: 15px 0 55px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    .left {
      width: 521px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      margin-top: 15px;
      h2 {
        
        a {
          font-size: 14px;
          font-family: MicrosoftYaHei;
          // line-height: 32px;
          color: rgba(51, 51, 51, 1);
          opacity: 1;
          float: right;
          font-weight: normal;
          padding-right: 5px;
          span {
            float: right;
            width: 18px;
            height: 18px;
            background: rgba(153, 153, 153, 1);
            border-radius: 50%;
            opacity: 1;
            margin-top: 6px;
            margin-left: 5px;
            i {
              display: block;
              width: 4px;
              height: 4px;
              margin: 6px auto;
              border-top: 2px solid #ffffff;
              border-right: 2px solid #ffffff;
              transform: rotate(45deg);
            }
          }
        }
        a:hover {
          color: rgba(15, 84, 188, 1);
          span {
            float: right;
            width: 18px;
            height: 18px;
            background: rgba(15, 84, 188, 1);
            border-radius: 50%;
            opacity: 1;
            margin-top: 6px;
            margin-left: 5px;
            i {
              display: block;
              width: 4px;
              height: 4px;
              margin: 6px auto;
              border-top: 2px solid #ffffff;
              border-right: 2px solid #ffffff;
              transform: rotate(45deg);
            }
          }
        }
      }
      ul.btn {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        border-top: 1px solid rgba(221, 221, 221, 1);
        li {
          margin: 5.5px 0;
          // width: 100px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          opacity: 1;
          margin-right:20px;
          // border: 1px solid #4c87e0;
          a,
          a:hover {
            // color: #4c87e0;
            text-decoration: none;
          }
        }
        li:hover,
        li.active {
          // background: #4c87e0;
          a,
          a:hover {
            color: #0f54bc;
            text-decoration: underline;
          }
        }
      }
      
    }
    .right {
      margin-top: 15px;
      width: 623px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      h2 {
        a {
          font-size: 14px;
          font-family: MicrosoftYaHei;
          // line-height: 32px;
          color: rgba(51, 51, 51, 1);
          opacity: 1;
          float: right;
          font-weight: normal;
          padding-right: 5px;
          span {
            float: right;
            width: 18px;
            height: 18px;
            background: rgba(153, 153, 153, 1);
            border-radius: 50%;
            opacity: 1;
            margin-top: 6px;
            margin-left: 5px;
            i {
              display: block;
              width: 4px;
              height: 4px;
              margin: 6px auto;
              border-top: 2px solid #ffffff;
              border-right: 2px solid #ffffff;
              transform: rotate(45deg);
            }
          }
        }
        a:hover {
          color: rgba(15, 84, 188, 1);
          span {
            float: right;
            width: 18px;
            height: 18px;
            background: rgba(15, 84, 188, 1);
            border-radius: 50%;
            opacity: 1;
            margin-top: 6px;
            margin-left: 5px;
            i {
              display: block;
              width: 4px;
              height: 4px;
              margin: 6px auto;
              border-top: 2px solid #ffffff;
              border-right: 2px solid #ffffff;
              transform: rotate(45deg);
            }
          }
        }
      }
      ul.btn {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        border-top: 1px solid rgba(221, 221, 221, 1);
        li {
          margin: 15px 0;
          width: 100px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          opacity: 1;
          border: 1px solid rgba(15, 84, 188, 1);
          a,
          a:hover {
            color: rgba(15, 84, 188, 1);
            text-decoration: none;
          }
        }
        li:hover,
        li.active {
          background: rgba(15, 84, 188, 1);
          a,
          a:hover {
            color: #fff;
          }
        }
      }
      
    }
  }
  .sectionb {
    width: 100%;
    height: 474px;
    background: url(../../assets/images/policy/banner.png) top center no-repeat;
    background-size: cover;
    margin-bottom: 30px;
    .sectionb_container {
      padding-top: 46px;
      width: 1200px;
      margin: 0 auto;
      box-sizing: border-box;
      p.des {
        height: 64px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
    .swiper-slide {
      
      .imga{
        border: 1px solid #fff;
        width:94%;
        margin:0 auto;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 5px;
        padding: 22px 18px;
      }
      h3 { 
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
      span {
        color: rgba(15, 84, 188, 1);
      }
      p.des {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 22px;
        color: rgba(153, 153, 153, 1);
        opacity: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      a {
        margin-top: 18px;
        display: block;
        text-align: center;
        width: 115px;
        height: 36px;
        border: 1px solid rgba(221, 221, 221, 1);
        border-radius: 2px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        line-height: 36px;
        color: rgba(102, 102, 102, 1);
        opacity: 1;
        border-radius: 2px;
      }
      a:hover {
        color: rgba(15, 84, 188, 1);
        border: 1px solid rgba(15, 84, 188, 1);
      }
    }
    .swiper-slide:hover {
      .imga{
        color: rgba(15, 84, 188, 1);
        border: 1px solid rgba(15, 84, 188, 1);
      }
      h3 {
        color: rgba(15, 84, 188, 1);
      }
      a {
        color: rgba(15, 84, 188, 1);
        border: 1px solid rgba(15, 84, 188, 1);
      }
    }
    
  }
  .sectionc {
    width: 100%;
    background: #fff;
    .seactionc_box{
      padding: 26px 0;
      width: 1200px;
      box-sizing: border-box;
      margin: 0 auto;
    }
    h2 {
      span {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(15, 84, 188, 1);
        opacity: 1;
      }
    }
    .sectionc_box {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      .left {
        width: 521px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-top: 15px;
        .el-form-item--small .el-form-item__label{
          line-height: 16px;
        }
        .el-input--small .el-input__inner{
          width: 390px;
        }
        .el-button--primary
        {
          width:99px;
          height:36px;
          background:rgba(15,84,188,1);
          opacity:1;
          font-size:14px;
          font-family:MicrosoftYaHei;
          color:rgba(255,255,255,1);
          opacity:1;
        }
        .btn-term{
          font-size:14px;
          font-family:MicrosoftYaHei;
          line-height:32px;
          color:rgba(85,85,85,1);
          opacity:1;
          margin-left: 18px;
          position:relative;
          top: 7px;
          cursor: pointer;
          .span-down{
            display:inline-block; 
            transform:rotate(90deg) scale(1.4,0.8);
            position:relative;
            top: 3px;
            left: 3px;
          }
        }
      }
      .right {
        margin-top: 15px;
        width: 623px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        h2 {
          a {
            font-size: 14px;
            font-family: MicrosoftYaHei;
            line-height: 32px;
            color: rgba(51, 51, 51, 1);
            opacity: 1;
            float: right;
            font-weight: normal;
            padding-right: 5px;
            span {
              float: right;
              width: 18px;
              height: 18px;
              background: rgba(153, 153, 153, 1);
              border-radius: 50%;
              opacity: 1;
              margin-top: 6px;
              margin-left: 5px;

              i {
                display: block;
                width: 4px;
                height: 4px;
                margin: 6px auto;
                border-top: 2px solid #ffffff;
                border-right: 2px solid #ffffff;
                transform: rotate(45deg);
              }
            }
          }
          a:hover {
            color: rgba(15, 84, 188, 1);
            span {
              float: right;
              width: 18px;
              height: 18px;
              background: rgba(15, 84, 188, 1);
              border-radius: 50%;
              opacity: 1;
              margin-top: 6px;
              margin-left: 5px;
              i {
                display: block;
                width: 4px;
                height: 4px;
                margin: 6px auto;
                border-top: 2px solid #ffffff;
                border-right: 2px solid #ffffff;
                transform: rotate(45deg);
              }
            }
          }
        }
        ul.list-box{
          p{width: calc(100% - 360px);}
          .date{
            width:250px;
            
          }
        }
      }
    }
  }
  .sectiond{
    padding: 26px 0;
    width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;
    h2 {
      span {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(15, 84, 188, 1);
        opacity: 1;
      }
    }
    ul{
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      li{
        width: 292px;
        height: 225px;
        margin-right:10px;
        img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .banner {
    img {
      display: block;
    }
    .el-carousel--button {
      width: 12px;
      height: 12px;
      background: rgba(255, 255, 255, 1);
      border-radius: 50%;
      opacity: 1;
    }
    .el-carousel--indicator.is-active button {
      background-color: #0f54bc;
    }
  }
  .serve-banner {
    .dd {
      position: relative;
      text-align: center;
      width: 96%;
      margin: 0 auto;
      overflow: hidden;
      cursor: pointer;
    }
    .dd img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .con {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(30, 30, 30, 0.79);
      color: #fff;
      .title {
        font-size: 24px;
        margin: 0 30px;
      }
      .line {
        margin: 20px 0 15px;
        display: block;
      }
      .np {
        margin: 0 30px;
      }
    }
    .prev1 {
      left: -50px;
    }
    .next1 {
      right: -50px;
    }
    .more {
      width: 94px;
      line-height: 28px;
      border: 1px solid rgba(245, 245, 245, 1);
      display: block;
      margin: 0 auto;
      opacity: 0;
    }
    .dd:hover .con {
      background: rgba(15, 84, 188, 0.8);
    }
    .dd:hover .more {
      opacity: 1;
      margin-top: 36px;
    }
    // .dd:hover .np{margin-bottom:60px;}
  }
  .news-box {
    .w1 {
      width: 44.5%;
      .h2 {
        padding: 20px 0 11px;
        line-height: 1;
      }
      .np {
        line-height: 20px;
        height: 40px;
      }
    }
    .w1:hover {
      color: #0f54bc;
    }
    .w2 {
      width: 46.5%;
    }
    .news-list {
      .li {
        position: relative;
        padding-bottom: 20px;
        border-bottom: 1px solid #ededed;
        margin-bottom: 20px;
        .ntit {
          margin-bottom: 8px;
          line-height: 1;
        }
        .ico {
          position: absolute;
          left: -10px;
          color: #999;
        }
      }
      .li:hover .ntit {
        color: #0f54bc;
      }
    }
  }
  .news-more {
    width: 222px;
    line-height: 46px;
    color: #fff;
    text-align: center;
    display: block;
    background: rgba(15, 84, 188, 1);
    border: 1px solid rgba(15, 84, 188, 1);
    opacity: 1;
    border-radius: 2px;
    margin: 0 auto 0;
  }
  .news-more:hover {
    background: rgba(15, 84, 188, 0.9);
  }
  .news-more:hover img {
    margin-left: 10px;
  }
  .banner .link {
    height: 450px;
    display: block;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .bannerdot {
    width: 100%;
    bottom: 10px;
    left: 0;
    z-index: 999;
  }
  .bannerdot .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    margin: 0 8px;
  }
  .bannerdot .swiper-pagination-bullet-active {
    background-color: #0f54bc;
  }
  
}
</style>